<template>
  <div class="switcher">
    <el-page-header content="切换/进入项目" title="Projects" />
    
    <!-- 路由模式信息 -->
    <el-card class="mt" shadow="never">
      <template #header>
        <div class="card-header">
          <span>路由模式配置</span>
          <el-tag :type="routerMode === 'hash' ? 'warning' : 'success'">
            {{ routerModeText }}
          </el-tag>
        </div>
      </template>
      
      <div class="mode-info">
        <p><strong>当前模式：</strong>{{ routerModeDescription }}</p>
        
        <div class="mode-description">
          <h4>模式说明：</h4>
          <ul>
            <li><strong>Hash模式：</strong>URL中包含#号，兼容性好，无需服务器配置</li>
            <li><strong>History模式：</strong>URL更美观，需要服务器支持，适合生产环境</li>
          </ul>
        </div>
        
        <div class="access-urls">
          <h4>访问地址：</h4>
          <ul>
            <li>项目切换页：<code>{{ getAccessUrl('/projects') }}</code></li>
            <li>默认项目：<code>{{ getAccessUrl('/') }}</code></li>
            <li>Demo_02项目：<code>{{ getAccessUrl('/demo_02') }}</code></li>
          </ul>
        </div>
        
        <el-alert 
          title="配置说明" 
          type="info" 
          :closable="false"
          class="mt">
          <template #default>
            路由模式通过环境变量 <code>VITE_ROUTER_MODE</code> 配置。
            修改 <code>.env</code> 文件中的配置后需要重启开发服务器生效。
          </template>
        </el-alert>
      </div>
    </el-card>

    <el-card class="mt" shadow="hover">
      <template #header>
        <div class="card-header">可用项目</div>
      </template>

      <el-empty v-if="projects.length === 0" description="暂无可用项目" />

      <el-row :gutter="16" v-else>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="name in projects" :key="name">
          <el-card shadow="never" class="proj" :body-style="{ padding: '12px' }">
            <div class="proj-title">{{ name }}</div>
            <div class="proj-actions">
              <el-button type="primary" size="small" @click="enter(name)">进入</el-button>
              <el-button size="small" @click="copyUrl(name)">复制链接</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { getAvailableProjects, switchProject } from '@/router/index.js'
import { ElMessage } from 'element-plus'

// 响应式数据
const projects = ref([])

// 计算属性
const routerMode = computed(() => import.meta.env.VITE_ROUTER_MODE || 'hash')
const defaultProject = computed(() => import.meta.env.VITE_ACTIVE_PROJECT || 'project_01')

// 路由模式显示文本
const routerModeText = computed(() => {
  return routerMode.value === 'hash' ? 'Hash模式' : 'History模式'
})

// 路由模式描述
const routerModeDescription = computed(() => {
  return routerMode.value === 'hash' 
    ? 'Hash模式 (/#/path)' 
    : 'History模式 (/path)'
})

// 生命周期
onMounted(() => {
  loadProjects()
})

// 方法
/**
 * 加载可用项目列表
 */
function loadProjects() {
  projects.value = getAvailableProjects()
}

/**
 * 进入指定项目
 * @param {string} projectName - 项目名称
 */
function enter(projectName) {
  switchProject(projectName)
}

/**
 * 复制项目链接到剪贴板
 * @param {string} projectName - 项目名称
 */
async function copyUrl(projectName) {
  try {
    const projectUrl = buildProjectUrl(projectName)
    await navigator.clipboard.writeText(projectUrl)
    ElMessage.success('链接已复制')
  } catch (error) {
    console.error('复制链接失败:', error)
    ElMessage.error('复制失败')
  }
}

/**
 * 构建项目访问URL
 * @param {string} projectName - 项目名称
 * @returns {string} 项目URL
 */
function buildProjectUrl(projectName) {
  const url = new URL(window.location.href)
  
  // 清除现有参数
  url.searchParams.delete('project')
  
  if (projectName === defaultProject.value) {
    // 默认项目使用根路径
    url.pathname = '/'
    url.hash = routerMode.value === 'hash' ? '#/' : ''
  } else {
    // 非默认项目使用项目前缀
    url.pathname = `/${projectName}`
    url.hash = routerMode.value === 'hash' ? `#/${projectName}` : ''
  }
  
  return url.toString()
}

/**
 * 获取访问URL示例
 * @param {string} path - 路径
 * @returns {string} 完整的访问URL
 */
function getAccessUrl(path) {
  return routerMode.value === 'hash' ? `/#${path}` : path
}
</script>

<style scoped>
.switcher { padding: 24px; }
.mt { margin-top: 16px; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.mode-info h4 {
  margin: 16px 0 8px 0;
  color: #303133;
  font-size: 14px;
}

.mode-info ul {
  margin: 8px 0;
  padding-left: 20px;
}

.mode-info li {
  margin: 4px 0;
  color: #606266;
  font-size: 14px;
}

.mode-description, .access-urls {
  margin: 16px 0;
}

.proj { margin-bottom: 16px; }
.proj-title { font-weight: 600; margin-bottom: 8px; }
.proj-actions { display: flex; gap: 8px; }
</style>